<template>
	<div class="SingerRecommendationContainer">
		<div class="recNav">
			<h2 class="title">歌手推荐</h2>
			<div class="singerListItem">
				<div class="active barItem">华语</div>
				<div class="barItem">欧美</div>
				<div class="barItem">日韩</div>
				<div class="barItem">组合</div>
				<router-link to="/singer" class="recNavToSinger">更多></router-link>
			</div>
		</div>
		<div class="recList">
			<div class="artistItem" v-for="item in artistList" :key="item.id">
				<div class="artist">
					<div class="picOut">
						<img alt="" class="pic" :src="item.picUrl" lazy="loaded" />
					</div>
					<p class="name flex_c">
						<span title="王搏" class="text">{{ item.name }}</span>
						<!---->
					</p>
					<p class="num">{{ item.musicSize }}首歌曲</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { reqGetArtistList } from "../../../../../api/home";
export default {
	name: "SingerRecommendation",
	data() {
		return {
			artistList: [],
		};
	},
	async mounted() {
		const artistList = await reqGetArtistList();
		this.artistList = artistList.artists.splice(0, 6).map((item) => {
			return {
				id: item.id,
				name: item.name,
				musicSize: item.musicSize,
				picUrl: item.picUrl,
			};
		});
	},
};
</script>

<style>
.SingerRecommendationContainer {
	max-width: 1400px;
	min-width: 1180px;
}
.SingerRecommendationContainer .recNav {
	margin-top: 60px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
}
.singerListItem {
	width: 338px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.singerListItem div {
	font-size: 14px;
}
.SingerRecommendationContainer .title {
	margin-right: 40px;
}
.singerListItem .active {
	font-size: 16px;
	color: black;
	font-weight: 600;
	padding-bottom: 5px;
	/* border-bottom: 3px solid #ec4141; */
	transform: translateY(4px);
	border-bottom: 2px solid #ffe443;
}
.recNavToSinger {
	text-decoration: none;
	color: black;
	font-size: 14px;
}

/* 歌手详情 */
.recList {
	display: flex;
	justify-content: space-between;
}
.artistItem {
	width: 13%;
}
.artist {
	text-align: center;
}

.picOut {
	position: relative;
	width: 182px;
	height: 182px;
	/* padding-bottom: 100%; */
	overflow: hidden;
	border-radius: 50%;
	font-size: 0;
	cursor: pointer;
}
.picOut img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.artist .name {
	position: relative;
	height: 22px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	margin-top: 17px;
	flex-wrap: nowrap;
	justify-content: center;
	padding: 0 5px;
}
.flex_c {
	display: flex;
	align-items: center;
}
.artist .num {
	margin-top: 6px;
	font-size: 12px;
	color: #999;
}
p {
	margin: 0;
}
</style>
